<!DOCTYPE html>
<html lang="zh-CN">
<head><meta name="generator" content="Hexo 3.9.0">
    <meta charset="UTF-8">

    

    

    <title>Ioiy-Aig&#39;s Blog</title>
    <meta name="author" content="Ioiy-Aig">
    <meta name="version" content="1.0.0">
    <meta name="keywords" content>
    <meta name="description" content>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

    
    <link rel="alternate" href="/atom.xml" title="Ioiy-Aig&#39;s Blog" type="application/atom+xml">
    
    
    <link rel="icon" href="yuyuanqiu.github.io/Aspirate.Qiu/images/favicon.ico">
    

    <link rel="stylesheet" href="/Aspirate.Qiu/css/style.css">
</head>
<body>

    <main class="app">
        <header class="header clearfix">
    <div id="nav" class="nav">
    <div class="nav-mobile">
        <button id="open-panel" class="open-panel nav-mobile-item"><i class="icon-documents"></i></button>
        <h1 class="nav-mobile-title nav-mobile-item">Ioiy-Aig&#39;s Blog</h1>
        <button id="open-menus" class="open-panel nav-mobile-item"><i class="icon-library"></i></button>
    </div>

    <nav id="nav-inner" class="nav-inner">
        
            <a class="nav-item active" href="/Aspirate.Qiu/">
                <span class="nav-text">首页</span>
            </a>
        
            <a class="nav-item" href="/Aspirate.Qiu/technologies">
                <span class="nav-text">技术</span>
            </a>
        
            <a class="nav-item" href="/Aspirate.Qiu/technologies/back-end">
                <span class="nav-text">随感</span>
            </a>
        
            <a class="nav-item" href="/Aspirate.Qiu/tags">
                <span class="nav-text">标签</span>
            </a>
        
            <a class="nav-item" href="/Aspirate.Qiu/archives">
                <span class="nav-text">归档</span>
            </a>
        
            <a class="nav-item" href="/Aspirate.Qiu/atom.xml">
                <span class="nav-text">订阅</span>
            </a>
        
            <a class="nav-item" href="/Aspirate.Qiu/about">
                <span class="nav-text">关于</span>
            </a>
        
    </nav>
</div>

    <aside id="aside" class="aside">
    <div id="aside-mask" class="aside-mask"></div>
    <div id="aside-inner" class="aside-inner">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit"><i class="icon-search-stroke"></i></button><input type="hidden" name="sitesearch" value="https://yuyuanqiu.github.io/Aspirate.Qiu"></form>

        
        

        
        <div class="author-meta">
            
            <div class="author-avatar">
                <a href="/Aspirate.Qiu/">
                    <img src="yuyuanqiu.github.io/Aspirate.Qiu/images/avatar.png" title="Aig Ioiy">
                </a>
            </div>
            
            <div class="author-name">Aig Ioiy</div>
            <div class="author-work">Front-End learner</div>
            <div class="author-location">
                <i class="icon-location vm"></i>
                <span class="vm">Shenzhen, China</span>
            </div>
            
            <div class="author-thread-wrap">
                <div class="author-threads clearfix">
                    
                        <a class="thread-item" href="https://github.com" target="_blank" rel="noopener">
                            <!-- Generated by IcoMoon.io -->
<svg viewbox="0 0 1024 1024" width="38" height="38" fill="currentColor">
<path d="M512 32.12c-265.004 0-479.88 220.23-479.88 492.090 0 217.446 137.536 401.684 328.202 466.81 23.994 4.498 32.778-10.712 32.778-23.78 0-11.782-0.428-42.632-0.642-83.764-133.466 29.778-161.744-65.984-161.744-65.984-21.852-56.772-53.344-71.982-53.344-71.982-43.49-30.636 3.214-29.992 3.214-29.992 48.202 3.428 73.482 50.772 73.482 50.772 42.846 75.196 112.258 53.558 139.68 40.918 4.284-31.706 16.71-53.558 30.42-65.77-106.474-12.426-218.516-54.63-218.516-243.152 0-53.772 18.638-97.69 49.274-131.966-4.928-12.426-21.424-62.556 4.714-130.252 0 0 40.276-13.282 131.966 50.344 38.348-10.926 79.266-16.282 120.184-16.496 40.704 0.214 81.836 5.57 120.184 16.496 91.692-63.626 131.752-50.344 131.752-50.344 26.136 67.698 9.64 117.828 4.714 130.252 30.636 34.492 49.274 78.408 49.274 131.966 0 188.952-112.258 230.514-219.16 242.724 17.138 15.21 32.564 45.202 32.564 91.048 0 65.77-0.642 118.898-0.642 134.966 0 13.068 8.57 28.492 32.992 23.566 191.094-64.912 328.418-249.152 328.418-466.382 0-271.86-214.874-492.090-479.88-492.090z"/>
</svg>

                        </a>
                    
                        <a class="thread-item" href="https://segmentfault.com/" target="_blank" rel="noopener">
                            <!-- Generated by IcoMoon.io -->
<svg viewbox="0 0 1024 1024" width="38" height="38" fill="currentColor">
<path d="M21.332 512c0-270.988 219.68-490.666 490.668-490.666s490.666 219.68 490.666 490.666c0 270.988-219.678 490.666-490.666 490.666s-490.666-219.678-490.666-490.666zM960 512c0-247.424-200.576-448-448-448s-448 200.576-448 448c0 247.424 200.576 448 448 448s448-200.576 448-448zM768 597.332c47.128 0 85.332-38.206 85.332-85.332s-38.206-85.332-85.332-85.332c-47.128 0-85.332 38.204-85.332 85.332s38.206 85.332 85.332 85.332zM512 597.332c47.128 0 85.332-38.206 85.332-85.332s-38.206-85.332-85.332-85.332c-47.128 0-85.332 38.204-85.332 85.332s38.204 85.332 85.332 85.332zM255.998 597.332c47.128 0 85.332-38.206 85.332-85.332s-38.204-85.332-85.332-85.332c-47.128 0-85.332 38.204-85.332 85.332s38.204 85.332 85.332 85.332z"/>
</svg>

                        </a>
                    
                        <a class="thread-item" href="https://juejin.im/timeline" target="_blank" rel="noopener">
                            <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1563505028820" class="icon" viewbox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1471" width="38" height="38" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"/></defs><path d="M1024 512c0-282.763636-229.236364-512-512-512C229.236364 0 0 229.236364 0 512s229.236364 512 512 512C794.763636 1024 1024 794.763636 1024 512zM236.311273 693.946182c8.843636 1.117091 17.873455 1.722182 26.996364 1.722182 53.015273 0.093091 101.794909-19.037091 140.474182-51.153455-49.524364-1.163636-91.275636-36.165818-105.658182-84.200727 6.888727 1.442909 14.010182 2.280727 21.271273 2.327273 10.333091 0.046545 20.293818-1.349818 29.789091-4.049455-51.758545-11.450182-90.763636-60.555636-90.763636-119.063273 0-0.512 0-1.024 0-1.536 15.266909 9.216 32.674909 14.801455 51.246545 15.639273C279.365818 431.709091 259.397818 394.472727 259.397818 352.581818c0-22.155636 5.585455-42.821818 15.313455-60.509091 55.808 73.774545 139.170909 122.740364 233.146182 128.837818-1.954909-8.797091-2.932364-17.966545-2.932364-27.322182 0-66.141091 50.641455-118.923636 113.105455-117.899636 32.535273 0.558545 61.952 15.499636 82.571636 38.958545 25.786182-4.933818 49.989818-14.429091 71.819636-27.694545-8.424727 27.601455-26.391273 50.594909-49.757091 64.977455 22.900364-2.56 44.683636-8.610909 64.977455-17.780364-15.173818 23.598545-34.350545 44.218182-56.459636 60.695273 0.232727 5.12 0.325818 10.24 0.325818 15.36 0 157.044364-113.803636 338.152727-321.861818 338.059636C345.832727 748.311273 286.347636 728.296727 236.311273 693.946182z" p-id="1472"/></svg>
                        </a>
                    
                </div>
            </div>
            
        </div>
        
    </div>
</aside>

</header>

        <div id="content" class="content">
    <article class="article" itemscope itemprop="blogPost">
    
    <header class="article-header">
        
        <h1 itemprop="name">
            <a href="/Aspirate.Qiu/2019/07/18/hello-world/">React官方文档说明</a>
        </h1>
        
        <div class="article-meta clearfix">
            <a class="article-date" href="https://yuyuanqiu.github.io/Aspirate.Qiu/index.html">
    
    <i class="icon-calendar"></i>
    
    <time datetime="2019-07-18T08:15:20.000Z" itemprop="datePublished">2019-07-18</time>
</a>

            

        </div>
    </header>
    
    <section class="article-body markdown-body">
        
        <h1 id="React-middot"><a href="#React-middot" class="headerlink" title="React &middot;    "></a><a href="https://reactjs.org/" target="_blank" rel="noopener">React</a> &middot; <a href="https://github.com/facebook/react/blob/master/LICENSE" target="_blank" rel="noopener"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="GitHub license"></a> <a href="https://www.npmjs.com/package/react" target="_blank" rel="noopener"><img src="https://img.shields.io/npm/v/react.svg?style=flat" alt="npm version"></a> <a href="https://circleci.com/gh/facebook/react" target="_blank" rel="noopener"><img src="https://circleci.com/gh/facebook/react.svg?style=shield&circle-token=:circle-token" alt="CircleCI Status"></a> <a href="https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request" target="_blank" rel="noopener"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs Welcome"></a></h1><p>React is a JavaScript library for building user interfaces.</p>
<ul>
<li><strong>Declarative:</strong> React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable, simpler to understand, and easier to debug.</li>
<li><strong>Component-Based:</strong> Build encapsulated components that manage their own state, then compose them to make complex UIs. Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.</li>
<li><strong>Learn Once, Write Anywhere:</strong> We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code. React can also render on the server using Node and power mobile apps using <a href="https://facebook.github.io/react-native/" target="_blank" rel="noopener">React Native</a>.</li>
</ul>
<p><a href="https://reactjs.org/docs/getting-started.html" target="_blank" rel="noopener">Learn how to use React in your own project</a>.</p>
<h2 id="Installation"><a href="#Installation" class="headerlink" title="Installation"></a>Installation</h2><p>React has been designed for gradual adoption from the start, and <strong>you can use as little or as much React as you need</strong>:</p>
<ul>
<li>Use <a href="https://reactjs.org/docs/getting-started.html#online-playgrounds" target="_blank" rel="noopener">Online Playgrounds</a> to get a taste of React.</li>
<li><a href="https://reactjs.org/docs/add-react-to-a-website.html" target="_blank" rel="noopener">Add React to a Website</a> as a <code>&lt;script&gt;</code> tag in one minute.</li>
<li><a href="https://reactjs.org/docs/create-a-new-react-app.html" target="_blank" rel="noopener">Create a New React App</a> if you’re looking for a powerful JavaScript toolchain.</li>
</ul>
<p>You can use React as a <code>&lt;script&gt;</code> tag from a <a href="https://reactjs.org/docs/cdn-links.html" target="_blank" rel="noopener">CDN</a>, or as a <code>react</code> package on <a href="https://www.npmjs.com/" target="_blank" rel="noopener">npm</a>.</p>
<h2 id="Documentation"><a href="#Documentation" class="headerlink" title="Documentation"></a>Documentation</h2><p>You can find the React documentation <a href="https://reactjs.org/docs" target="_blank" rel="noopener">on the website</a>.  </p>
<p>Check out the <a href="https://reactjs.org/docs/getting-started.html" target="_blank" rel="noopener">Getting Started</a> page for a quick overview.</p>
<p>The documentation is divided into several sections:</p>
<ul>
<li><a href="https://reactjs.org/tutorial/tutorial.html" target="_blank" rel="noopener">Tutorial</a></li>
<li><a href="https://reactjs.org/docs/hello-world.html" target="_blank" rel="noopener">Main Concepts</a></li>
<li><a href="https://reactjs.org/docs/jsx-in-depth.html" target="_blank" rel="noopener">Advanced Guides</a></li>
<li><a href="https://reactjs.org/docs/react-api.html" target="_blank" rel="noopener">API Reference</a></li>
<li><a href="https://reactjs.org/community/support.html" target="_blank" rel="noopener">Where to Get Support</a></li>
<li><a href="https://reactjs.org/docs/how-to-contribute.html" target="_blank" rel="noopener">Contributing Guide</a></li>
</ul>
<p>You can improve it by sending pull requests to <a href="https://github.com/reactjs/reactjs.org" target="_blank" rel="noopener">this repository</a>.</p>
<h2 id="Examples"><a href="#Examples" class="headerlink" title="Examples"></a>Examples</h2><p>We have several examples <a href="https://reactjs.org/" target="_blank" rel="noopener">on the website</a>. Here is the first one to get you started:</p>
<figure class="highlight jsx"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">HelloMessage</span>(<span class="params">&#123; name &#125;</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> &lt;div&gt;Hello &#123;name&#125;&lt;/div&gt;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">ReactDOM.render(</span><br><span class="line">  &lt;HelloMessage name=<span class="string">"Taylor"</span> /&gt;,</span><br><span class="line">  <span class="built_in">document</span>.getElementById(<span class="string">'container'</span>)</span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<p>This example will render “Hello Taylor” into a container on the page.</p>
<p>You’ll notice that we used an HTML-like syntax; <a href="https://reactjs.org/docs/introducing-jsx.html" target="_blank" rel="noopener">we call it JSX</a>. JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. If you’re using React as a <code>&lt;script&gt;</code> tag, read <a href="https://reactjs.org/docs/add-react-to-a-website.html#optional-try-react-with-jsx" target="_blank" rel="noopener">this section</a> on integrating JSX; otherwise, the <a href="https://reactjs.org/docs/create-a-new-react-app.html" target="_blank" rel="noopener">recommended JavaScript toolchains</a> handle it automatically.</p>
<h2 id="Contributing"><a href="#Contributing" class="headerlink" title="Contributing"></a>Contributing</h2><p>The main purpose of this repository is to continue to evolve React core, making it faster and easier to use. Development of React happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving React.</p>
<h3 id="Code-of-Conduct"><a href="#Code-of-Conduct" class="headerlink" title="Code of Conduct"></a><a href="https://code.fb.com/codeofconduct" target="_blank" rel="noopener">Code of Conduct</a></h3><p>Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please read <a href="https://code.fb.com/codeofconduct" target="_blank" rel="noopener">the full text</a> so that you can understand what actions will and will not be tolerated.</p>
<h3 id="Contributing-Guide"><a href="#Contributing-Guide" class="headerlink" title="Contributing Guide"></a><a href="https://reactjs.org/contributing/how-to-contribute.html" target="_blank" rel="noopener">Contributing Guide</a></h3><p>Read our <a href="https://reactjs.org/contributing/how-to-contribute.html" target="_blank" rel="noopener">contributing guide</a> to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to React.</p>
<h3 id="Good-First-Issues"><a href="#Good-First-Issues" class="headerlink" title="Good First Issues"></a>Good First Issues</h3><p>To help you get your feet wet and get you familiar with our contribution process, we have a list of <a href="https://github.com/facebook/react/labels/good%20first%20issue" target="_blank" rel="noopener">good first issues</a> that contain bugs which have a relatively limited scope. This is a great place to get started.</p>
<h3 id="License"><a href="#License" class="headerlink" title="License"></a>License</h3><p>React is <a href="./LICENSE">MIT licensed</a>.</p>

        
    </section>
</article>





</div>
        <footer class="footer">
    Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>, Theme by <a href="https://github.com/sanonz/hexo-theme-concise" target="_blank">Concise</a>

    
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?6b527e5d3c7b364c01e2162ace29e8b2";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    
</footer>

    </main>

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
        var nodes = {
            nav: $('#nav'),
            aside: $('#aside'),
            asideInner: $('#aside-inner'),
            navInner: $('#nav-inner')
        };

        var doing = false;
        nodes.asideInner.on('webkitAnimationEnd mozAnimationEnd oAnimationEnd oanimationend animationend', function() {
            if (nodes.aside.hasClass('mobile-open')) {
                nodes.aside.removeClass('mobile-open');
            } else {
                nodes.aside.removeClass('mobile-close panel-show');
            }
            doing = false;
        });
        $('#open-panel, #aside-mask').on('click', function() {
            if (doing) {
                return;
            }
            
            if (nodes.aside.hasClass('panel-show')) {
                nodes.aside.addClass('mobile-close');
            } else {
                nodes.aside.addClass('mobile-open panel-show');
            }
        });
        $('#open-menus').on('click', function() {
            nodes.navInner.slideToggle();
        });

        if (window.innerWidth <= 960) {
            setTimeout(function() {
                nodes.navInner.slideUp();
            }, 3000);
        }
    });
    </script>
    

</body>
</html>
